<div [ngClass]="{ 'show-drop-area': showDropScrollArea }">
  <div class="drop-row devui-scrollbar" dDropScrollEnhanced [direction]="'h'" [dropScrollScope]="['mutiple-group', 'drag-follow']">
    <div class="drop-col" *ngFor="let list of lists">
      <div class="card card-outline-primary mb-3" dDroppable [dropScope]="'mutiple-group'" (dropEvent)="onDrop($event, list.list)">
        <div class="card-header">{{ list.name }}</div>
        <div class="card-block">
          <ul
            class="list-group drop-el devui-scrollbar"
            dSortable
            dDropScrollEnhanced
            [direction]="'v'"
            [responseEdgeWidth]="'20px'"
            [dropScrollScope]="'mutiple-group'"
          >
            <li
              dDraggable
              *ngFor="let item of list.list"
              [dragScope]="'mutiple-group'"
              [dragHandleClass]="'drag-handle'"
              [dragData]="{ item: item, parent: list.list }"
              class="list-group-item over-flow-ellipsis"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="option-toggle">
    <d-toggle [(ngModel)]="showDropScrollArea"></d-toggle>
    <span>Show drop scroll response area</span>
  </div>
  <ng-container *ngIf="showDropScrollArea">
    <div>
      <span class="color-example active" style="display: inline-block; width: 25px; height: 14px; margin-right: 4px"></span>
      Active area, dragging over it to trigger scroll and show more
    </div>
    <div>
      <span class="color-example inactive" style="display: inline-block; width: 25px; height: 14px; margin-right: 4px"></span>
      Inactive area, dragging over it will be able to drop to element under the cover
    </div>
  </ng-container>
</div>
